<template>
  <div class="huiyuanjingji">
    <div
      class="samlldiv"
      :class="[activenum ? 'animate__animated  animate__fadeInDown' : '']"
      v-if="active"
    >
      <Kspcdialogtop @kspTop="kspTop" />
    </div>
    <div class="samlldiv animate__animated animate__fadeInUp" v-show="!active">
      <Kspcdialogbottom @kspBtm="kspBtm" ref="animation" />
    </div>

    <div
      v-if="active"
      class="bottonshuzipopupdown"
      @click="qiehuan(0)"
      id="shuzijiaoyipopupbottomdown"
    >
      <img
        src="../assets/shuzijiaoyipopupbottomdown.png"
        style="width: 1.5rem; height: 1.2rem"
      />
    </div>
    <div
      v-else
      class="bottonshuzipopuptop"
      @click="qiehuan(1)"
      id="shuzijiaoyipopupbottomup"
    >
      <img
        src="../assets/shuzijiaoyipopupbottomup.png"
        style="width: 1.5rem; height: 1.2rem"
      />
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index"; 
import Echart from "@/common/echart";
import * as echarts from "echarts"; 
import Kspcdialogtop from "@/components/kspcdialogtop_1.vue"; 
import Kspcdialogbottom from "@/components/kspcdialogbottom_1.vue"; 
export default {
  name: "hyjjsecongpopup",
  components: { 
    Kspcdialogtop,Kspcdialogbottom
  },
  props: {},
  data() {
    return {
      
      active: true,
      activenum: 0,
      
    };
  },
  watch: {
    
  },
  mounted() {  
  },
  methods: {
    qiehuan(index) {
      this.activenum++;
      if (index == 0) {
        this.$refs['animation'].animation()
        this.active = false; 
        this.$store.state.imgurlsel = require("@/assets/imgs/yellowdownsanjiao.png");
      } else {

        this.active = true;
        this.$store.state.imgurlsel = require("@/assets/imgs/blacksanjiao.png");
      }
    },
    kspTop(id){
      this.$refs.animation.getdetail(id);
      this.$refs.animation.getQCDSCateGoryScore(id);
      this.$refs.animation.supParam.supplierid = id;
      this.$refs.animation.getSupplierTbZbList();
      this.$refs.animation.proParam.orgId = id;
      this.$refs.animation.getProjectEvaluation();
    },
    kspBtm(){}
  },
};
</script>

<style scoped lang="scss">
.huiyuanjingji {
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  position: relative;
  scroll-behavior: smooth;
  // overflow: hidden;
  font-size: 1rem;
  padding-top: 1px;

  .samlldiv {
    width: 100%;
    height: calc(100% - 2.3rem);
    box-sizing: border-box; 
    overflow: auto;
  }
}
.bottonshuzipopupdown {
  height: 1.2rem;
  position: absolute;
  bottom: 0%;
  width: 90%;
  padding: 0.5%;
  background-image: url("../assets/shuzijiaoyibottombg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}
.bottonshuzipopuptop {
  position: absolute;
  bottom: 0%;
  width: 90%;
  padding: 0.5%;
  z-index: 2147483647 !important;
  background-image: url("../assets/shuzijiaoyibottombg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}
</style>